<template>
	<view>
		<view v-if="swiperList.length" class="swiper-view">
			<swiper class="swiper-css" :autoplay="true" @change="(event) => swiperIndex = event.detail.current">
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<image :src="`${IMG_URL}${item.imgUrl}`" class="swiper-image" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="swiper-dot">
				<view v-for="(item, index) in swiperList.length" :key="index" class="dot-item"
					:class="{'dot-active':index == swiperIndex}">
				</view>
			</view>
			<view class="swiper-dot">
				{{swiperIndex + 1}} / 2
			</view>
		</view>
		<view class="select-view" @touchmove.prevent.stop>
			<view class="select-item" @click="onSynthesize"
				:class="{'select-active': !queryData.priceSortType && !queryData.stockSortType && !queryData.minRedeemPoints&& !queryData.maxRedeemPoints}">
				综合
			</view>
			<view class="select-item" :class="{'select-active': queryData.priceSortType}"
				@click="onSortEvent('priceSortType')">
				<view>销量</view>
				<image v-if="queryData.priceSortType == '10'" src="/static/sort-icon-top.png" class="sort-icon"></image>
				<image v-else-if="queryData.priceSortType == '20'" src="/static/sort-icon-down.png" class="sort-icon">
				</image>
				<image v-else src="/static/sort-icon-none.png" class="sort-icon"></image>
			</view>
			<view class="select-item" :class="{'select-active': queryData.stockSortType}"
				@click="onSortEvent('stockSortType')">
				<view>积分</view>
				<image v-if="queryData.stockSortType == '10'" src="/static/sort-icon-top.png" class="sort-icon"></image>
				<image v-else-if="queryData.stockSortType == '20'" src="/static/sort-icon-down.png" class="sort-icon">
				</image>
				<image v-else src="/static/sort-icon-none.png" class="sort-icon"></image>
			</view>
			<view class="select-item" :class="{'select-active': queryData.minRedeemPoints || queryData.maxRedeemPoints}" @click="isSection = true">
				<view>分值区间</view>
				<image src="/static/sort-icon-arrows.png" class="sort-icon"></image>
			</view>
			<view v-if="isSection" class="section-mode" @click.stop="isSection = false"></view>
			<view v-if="isSection" class="section-view" @click.stop>
				<SlidingBlock :list="minAndMax" :start="queryData.minRedeemPoints" :end="queryData.maxRedeemPoints"
					@change="onSlidingChange"></SlidingBlock>
			</view>
		</view>
		<scroll-view scroll-x class="classify-view">
			<view style="display: inline-block;width: 22upx;"></view>
			<view class="classify-item " :class="{'classify-active': !queryData.categoryFirstId}"
				@click="onCategoryEvent('')">全部分类</view>
			<view v-for="(item, index) in categoryList" :key="index" class="classify-item"
				@click="onCategoryEvent(item.goodsCategoryId)"
				:class="{'classify-active': queryData.categoryFirstId == item.goodsCategoryId}">{{item.name}}</view>
			<view style="display: inline-block;width: 22upx;"></view>
		</scroll-view>

		<view class="goods-list">
			<navigator v-for="(item, index) in dataList" :key="index" :url="`/pages/goodsDetail/goodsDetail?detailId=${item.spuId}`"
				hover-class="none" class="goods-item">
				<image :src="getImage(item.coverImg)" class="goods-image" mode="aspectFill"></image>
				<view class="goods-name">{{item.name}}</view>
				<view class="goods-price">
					<view>{{item.redeemPoints}}</view>
					<view class="price-unit">积分</view>
				</view>
				<view class="options-view">
					<view class="market-price">价值：￥{{item.marketPrice}}</view>
					<view class="number-text">剩余{{item.stock}}</view>
				</view>
			</navigator>
		</view>

		<Empty v-if="!dataList.length"></Empty>

		<view style="height: 160upx;"></view>
	</view>
</template>

<script>
	import SlidingBlock from './components/SlidingBlock.vue'
	export default {
		components: {
			SlidingBlock
		},
		data() {
			return {
				isSection: false,
				swiperIndex: 0,
				swiperList: [],
				dataList: [],
				categoryList: [],
				minAndMax: [],
				queryData: {
					total: 0,
					pageNo: 1,
					pageSize: 15,
					minRedeemPoints: '', // 最小积分数
					maxRedeemPoints: '', // 最大积分数据
					categoryFirstId: '', // 分类ID
					priceSortType: "", // 价格排序类型 10升序 20降序
					stockSortType: "" // 库存排序类型 10升序 20降序
				}
			};
		},
		onLoad(options) {
			this.getCategoryList()
			this.getRequestList()
			this.getBannerList()
			this.getConfig()
		},
		onPullDownRefresh() {
			this.queryData.pageNo = 1
			this.getRequestList()
		},
		onReachBottom() {
			if (this.queryData.total <= this.dataList.length) return
			this.queryData.pageNo += 1
			this.getRequestList()
		},
		methods: {
			async getConfig() {
				const res = await uni.$api.getConfig('SCORE_INTERVAL')
				if (!res.data.value) return
				const list = JSON.parse(res.data.value)
				this.minAndMax = list
				console.log(list);
			},
			onCategoryEvent(goodsCategoryId) {
				this.queryData.categoryFirstId = goodsCategoryId
				this.queryData.pageNo = 1
				this.getRequestList()
			},
			async getRequestList() {
				uni.$util.showLoading()
				const res = await uni.$api.getGoodsPage(this.queryData).finally(uni.finally)
				const list = res.data.rows || []
				this.queryData.total = res.data.totalRows
				this.dataList = this.queryData.pageNo == 1 ? list : this.dataList.concat(list)
			},
			async getCategoryList() {
				uni.$util.showLoading()
				const res = await uni.$api.getCategoryList().finally(uni.finally)
				this.categoryList = res.data
			},
			onSortEvent(key) {
				let sort = this.queryData[key]
				if (!this.queryData[key]) this.queryData[key] = '10'
				else if (this.queryData[key] == '10') this.queryData[key] = '20'
				else if (this.queryData[key] == '20') this.queryData[key] = ''
				this.isSection = false
				this.queryData.pageNo = 1
				this.getRequestList()
			},
			/**
			 * 综合点击事件
			 */
			onSynthesize() {
				this.queryData.priceSortType = ''
				this.queryData.stockSortType = ''
				this.queryData.minRedeemPoints = ''
				this.queryData.maxRedeemPoints = ''
				this.isSection = false
				this.queryData.pageNo = 1
				this.getRequestList()
			},
			/**
			 * 分支区间
			 */
			onSlidingChange(event) {
				this.isSection = false
				this.queryData.minRedeemPoints = event.start || ''
				this.queryData.maxRedeemPoints = event.end || ''
				this.queryData.pageNo = 1
				this.getRequestList()
			},
			async getBannerList() {
				const res = await uni.$api.bannerList(60)
				this.swiperList = res.data || []
			},
			getImage(coverImg) {
				const strArr = coverImg.split(',')
				if (!strArr.length) return ''
				return `${this.IMG_URL}${strArr.shift()}`
			},
		}
	}
</script>
<style>
	page {
		background: white !important;
	}
</style>
<style scoped lang="scss">
	.swiper-view {
		width: 100%;
		height: 252upx;
		position: relative;

		.swiper-css {
			width: 100%;
			height: 100%;

			.swiper-image {
				width: 100%;
				height: 100%;
			}
		}

		.swiper-dot {
			padding: 5upx 9upx;
			background: rgba(6, 0, 0, 0.9);
			font-size: 22rpx;
			font-weight: 400;
			color: #FFFFFF;
			position: absolute;
			z-index: 1;
			left: 22upx;
			bottom: 22upx;
		}
	}

	.select-view {
		width: 100%;
		height: 86rpx;
		padding: 0 33upx;
		background: #FFFFFF;
		@extend .row-between;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 20;

		.section-mode {
			width: 100%;
			height: 100vh;
			background: rgba(6, 0, 0, 0.9);
			position: absolute;
			top: 86upx;
			left: 0;
			z-index: 2;
		}

		.section-view {
			width: 100%;
			position: absolute;
			top: 86upx;
			left: 0;
			background: #FFFFFF;
			z-index: 3;
			padding-top: 62upx;
			border-radius: 0rpx 0rpx 14rpx 14rpx;

		}


		.select-item {
			@extend .row;
			font-size: 25rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #2C1101;

			.sort-icon {
				width: 20upx;
				height: 20upx;
				margin-left: 9upx;
			}
		}

		.select-active {
			color: #FF442F;
		}
	}

	.classify-view {
		width: 100%;
		height: 76upx;
		white-space: nowrap;
		padding-top: 10upx;
		background: white;

		.classify-item {
			display: inline-block;
			padding: 7upx 22upx;
			border-radius: 7rpx;
			background: rgba(184, 172, 163, 0.15);
			font-size: 25rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #2C1101;
		}

		.classify-item+.classify-item {
			margin-left: 18upx;
		}

		.classify-active {
			background: #FF3F25;
			color: white;
		}
	}


	.goods-list {
		width: 100%;
		@extend .row-between;
		align-items: flex-start;
		flex-wrap: wrap;
		padding: 0 22upx;

		.goods-item {
			width: calc(100% / 2 - 9upx);
			border: 1rpx solid #F7E8E4;
			border-radius: 7upx;
			padding-bottom: 18upx;
			margin-top: 18upx;

			.goods-image {
				width: 100%;
				height: 344rpx;
				border-radius: 7upx 7upx 0 0;
			}

			.goods-name {
				width: 100%;
				padding: 0 14upx;
				margin-top: 18upx;
				@extend .text-dot-one;
				-webkit-line-clamp: 2;
				font-size: 29rpx;
				font-weight: 400;
				color: #301406;
			}

			.goods-price {
				width: 100%;
				padding: 0 14upx;
				@extend .row-start;
				align-items: baseline;
				font-size: 36rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #EA3918;
				margin-top: 18upx;

				.price-unit {
					font-size: 22rpx;
					margin-left: 10upx;
				}
			}

			.options-view {
				width: 100%;
				padding: 0 14upx;
				margin-top: 9upx;
				@extend .row-between;
				font-size: 22rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #B8ACA3;
			}
		}
	}
</style>